<template>
  <!-- <div>新建</div> -->
  <div class="box">
    <div id="map"></div>
  </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted, inject } from "vue";
import { useRoute, useRouter } from "vue-router";
const props = defineProps({});
let emit = defineEmits([""]);
console.log(window.webConfig.MAP_URL);
let viewerOptions = {
  antialias: true,
  shadows: true,
  contextOptions: {
    webgl: {
      alpha: true,
    },
  },
  imageryProvider: new Cesium.UrlTemplateImageryProvider({
    url: window.webConfig.MAP_URL,
    fileExtension: "png",
    maximumLevel: 17,
    minimumLevel: 1,
  }),

  // sceneMode: Cesium.SceneMode.COLUMBUS_VIEW,
  sceneMode: Cesium.SceneMode.SCENE2D,
  geocoder: false, //隐藏查找位置
  shouldAnimate: true, //时间不动
  homeButton: false, //是否显示回到初始位置
  sceneModePicker: false, //23D切换
  infoBox: false,
  baseLayerPicker: false, //图层选择
  navigationHelpButton: false, //帮助
  animation: true, //动画控制
  timeline: true, //时间轴
  fullscreenButton: false, //全屏
  vrButton: false, //vr
  selectionIndicator: false,
  creditsDisplay: false,
  navigationInstructionsInitiallyVisible: true,
  scene3DOnly: false, //为了节省GPU内存，每个几何实例只会在3D下被渲染。
  targetFrameRate: 60, //设置最大频率数
  resolutionScale: 1, //清晰度 0-1
  maximumRenderTimeChange: Infinity, // 无操作时自动渲染帧率，设为数字会消耗性能，Infinity为无操作不渲染
  useBrowserRecommendedResolution: false, // 是否选择浏览器推荐分辨率
  maximumScreenSpaceError: 64, //屏幕空间最大误差
  terrainShadows: Cesium.ShadowMode.DISABLED, // 地质接收阴影
  // requestRenderMode: true,
  // useBrowserRecommendedResolution: true,
  automaticallyTrackDataSourceClocks: true,
  orderIndependentTranslucency: true,
};
const init = async () => {
  // Cesium.Ion.defaultAccessToken =
  //   "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiODQzMGFkNi0xOTNkLTQ2OWMtOWVjNS02NWIyOGQ5MmUzNmYiLCJpZCI6OTAzNDksImlhdCI6MTY1MDMzMzIxOH0.sI2TCvX5Bf0EkJkWc0kg0lFdNGnFNqjEI2ceMWRiyWo";

  window.viewer = new Cesium.Viewer("map",viewerOptions);

  // window.viewer = new Cesium.Viewer('map',)
  window.viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(130, 25, 5000000),
    duration: 1,
  });
};

onMounted(() => {

  init();

});
</script>
<style scoped lang="scss">
.box{
  width: 100%;
  height: 100%;
 
}
#map {
  width: 100%;
  height: 100%;
}
</style>
